<template>
  <div v-loading="loading" element-loading-text="加载中">
    <el-form ref="customForm" :model="customForm" label-position="right" label-width="160px">
      <div v-for="(item, index) in customForm.customFormList" :key="index">
        <!-- 文本框 -->
        <el-form-item v-if="item.attributeType == 'text'" 
          :label="item.attributeName + '：'" 
          :prop="'customFormList.'+index+'.attributeValue'" 
          :rules="requiredRule(item)">

          <el-input v-model="item.attributeValue" class="width-350" maxlength="20"></el-input>
        </el-form-item>
        <!-- 日期框 -->
        <el-form-item v-if="item.attributeType == 'date'" 
          :label="item.attributeName + '：'" 
          :prop="'customFormList.'+index+'.attributeValue'" 
          :rules="requiredRule(item)">

          <el-date-picker v-model="item.attributeValue" value-format="yyyy-MM-dd" type="date" class="width-350" :placeholder="'请选择' + item.attributeName"></el-date-picker>
        </el-form-item>
        <!-- 选项框 -->
        <el-form-item v-if="item.attributeType == 'select'" 
          :label="item.attributeName + '：'" 
          :prop="'customFormList.'+index+'.attributeValue'" 
          :rules="requiredRule(item)">

          <el-select v-model="item.attributeValue" class="width-350" :placeholder="'请选择' + item.attributeName">
            <el-option v-for="(option, option_index) in item.optionList" :key="option_index" :label="option.optionName" :value="option.optionValue"></el-option>
          </el-select>
        </el-form-item>
        <!-- 勾选框 -->
        <el-form-item v-if="item.attributeType == 'checkbox'" 
          :label="item.attributeName + '：'" 
          :prop="'customFormList.'+index+'.attributeValue'" 
          :rules="requiredRule(item)">

          <el-checkbox v-model="item.attributeValue" true-label="1" false-label="0"></el-checkbox>
        </el-form-item>
      </div>
    </el-form>

    <el-button v-show="customForm.customFormList.length > 0" type="primary" class="btn" @click="doSave">保存</el-button>
  </div>
</template>

<script>
  import { getCustomFormByModule, saveForm } from '@/api/custom/customAttributeValue'

  export default {
    props: {
      targetId: {
        type: String
      },
      moduleCode: {
        type: String
      }
    },
    data() {
      return {
        loading: false,
        // 自定义表单
        customForm: {
          customFormList: []
        }
      }
    },
    created() {
      if (!this.moduleCode || !this.targetId) return
      this.init()
    },
    methods: {
      init() {
        this.loading = true
        getCustomFormByModule(this.moduleCode, this.getEnterpriseId(), this.targetId).then(response => {
          if (response.isError) return
          this.customForm.customFormList = response.data
          this.customForm.customFormList.forEach(e => {
            // 初始化
            if (!e.valueId) {
              this.$set(e, 'valueId', '')
              this.$set(e, 'targetId', this.targetId)
              this.$set(e, 'attributeValue', '')
            }

            // 设置默认值
            if (!e.attributeValue && e.attributeDefaultValue) {
              this.$set(e, 'attributeValue', e.attributeDefaultValue)
            }
          })
        })
        this.loading = false
      },
      // 必输校验
      requiredRule(item) {
        if (item.attributeValueNullable === 0) {
          return [{ required: true, message: '请输入' + item.attributeName, trigger: 'blur' }]
        } else {
          return []
        }
      },
      // 保存事件
      doSave() {
        this.$refs['customForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            saveForm({ customFormList: this.customForm.customFormList }).then(response => {
              if (response.isError) return
              this.$message({ type: 'success', message: '保存成功!' })
              this.init()
            })
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .btn {
    padding: 15px 40px;
    margin: 30px 0 0 160px;
  }
  .el-date-editor.el-input {
    width: 350px !important;
  }
</style>